<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style id="css">
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #box{
            width:800px;
            height: 360px;
            margin: 80px auto;
            box-shadow: 0 0 5px #000;
            position: relative;
        }
        #pic{
            width: 800px;
            height: 360px;
            perspective: 800px;
        }
        #pic ul{
            width: 800px;
            height: 360px;
        }
        #pic ul li{
            height: 360px;
            float: left;
            text-align: center;
            line-height: 360px;
            transform-style: preserve-3d;
            transition: 1s;
            /*transform-origin: center center -180px;*/
            transform: translateZ(-180px) rotateX(0);
            position: relative;
        }
        #pic ul li div{
            position: absolute;
            height: 360px;

        }
        #pic ul li div:nth-child(1){
            top:-360px;transform-origin: bottom;
            background: url(img/1.png);
            transform:translateZ(180px) rotateX(90deg);
        }
        #pic ul li div:nth-child(2){
            top:360px;transform-origin: top;
            background: url(img/2.png);
            transform:translateZ(180px) rotateX(-90deg);
        }
        #pic ul li div:nth-child(3){
            left:0;top:0;
            background: url(img/3.png);
            transform: translateZ(180px);
        }
        #pic ul li div:nth-child(4){
            left:0;top:0;
            background: url(img/4.png) ;
            transform: translateZ(-180px) rotateX(180deg);
        }
/*        #pic ul li:nth-child(2) div:nth-child(3){background-position: -200px 0;}

        #pic ul li:nth-child(3) div:nth-child(3){
               background-position: -400px 0;
           }
        #pic ul li:nth-child(4) div:nth-child(3){
            background-position: -600px 0;
        }
*/
/*       #pic ul li div:nth-child(5){

            width: 360px;
            left:-360px;
            transform-origin: right;
            transform:translateZ(180px) rotateY(-90deg);
        }
        #pic ul li div:nth-child(6){
            width: 360px;
            left:200px;
            transform-origin: left;
            transform:translateZ(180px) rotateY(90deg);
        }
        #box:hover ul li{
            -transform: translateZ(-180px) rotateX(360deg);
        }
*/
        #tab{
            position: absolute;
            bottom: 10px;
            right: 0;
            width: 150px;
            height: 20px;
            border:1px solid;
            color: white;
            text-align: center;
            font: 12px/20px 'Microsoft yahei';
        }
        #tab li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            float: left;
            background: #999;
            margin-left:10px;
            cursor: pointer;
        }
        #tab li.on{
            background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="pic">
            <ul id="ul">
<!--                <li><div></div><div></div><div></div><div></div></li>
                <li>
                    <div>上</div>
                    <div>下</div>
                    <div>前</div>
                    <div>后</div>
                </li>
                <li>
                    <div>上</div>
                    <div>下</div>
                    <div>前</div>
                    <div>后</div>
                </li>
                <li style="z-index: -1">
                    <div>上</div>
                    <div>下</div>
                    <div>前</div>
                    <div>后</div>
                </li>
-->
            </ul>
        </div>
        <div id="tab">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
    </div>

    <script>
        var aTabLi = tab.getElementsByTagName('li');
        var aPicLi = pic.getElementsByTagName('li');
        var n = 0;
        var timer;
        for ( var i=0;i<aTabLi.length;i++ ){
            aTabLi[i].index = i;
            aTabLi[i].onclick = function(){
                for(var i=0;i<aTabLi.length;i++){
                    aTabLi[i].className = '';
                }
                this.className = 'on';
                css.innerHTML += '#pic ul li{transform: translateZ(-180px) rotateX('+-90*this.index+'deg)}';
            }
        }

        play(100);
        function play( num ) {
            var width = 800 / num;
            var uStr = '';
            var pStr = '';
            var z = 0;
            var zStr = '';
            var tStr = '';
            for( var i=0;i<num;i++ ){
                if( i>=num/2 ){
                    z --;
                    zStr += '#pic ul li:nth-child('+(i+1)+'){z-index:'+z+'}'
                }
                uStr += '<li><div></div><div></div><div></div><div></div></li>';
                pStr += '#pic ul li:nth-child('+(i+1)+') div{background-position: '+(-i*width)+'px 0;}';
                tStr += '#pic ul li:nth-child('+(i+1)+'){transition:0.5s '+(0.5*i/num)+'s}';
            }

            ul.innerHTML = uStr;
            css.innerHTML += pStr + zStr + tStr +'#pic ul li,#pic ul li div{width:'+width+'px}';
        }

        timer = setInterval(auto,3000);
        box.onmouseenter = function () {
            clearInterval( timer);
        };
        box.onmouseleave = function () {
            timer = setInterval(auto,3000);
        };
        function auto() {
            n ++;
            n%=4;
            for(var i=0;i<aTabLi.length;i++){
                aTabLi[i].className = '';
            }
            aTabLi[n].className = 'on';
            css.innerHTML += '#pic ul li{transform: translateZ(-180px) rotateX('+-90*n+'deg)}';
        }
    </script>
</body>
</html>